<template>
	<view class="zh-storage-stock">
	<!-- 	<view class="tabs">
			<u-tabs width="400" :titles="['按明细']" position="fixedTop" @click="clickTab"></u-tabs>
		</view> -->
		<view class="content">
			<view class="display-flex justify-between align-center">
				<view class="sum-list">
					<text>共</text>
					<text class="font-FF661B">{{ stockData.total }}</text>
					<text>个记录，</text>
					<text class="font-FF661B">{{ stockData.sumList && stockData.sumList.spjs }}</text>
					<text>件，</text>
					<text class="font-FF661B">{{ stockData.sumList && stockData.sumList.spsl }}</text>
					<text>吨</text>
				</view>
				<view class="filter display-flex align-center">
					<view class="display-flex align-center" @click="changePopupShow">
						<text class="font-28">筛选</text>
						<image src="@/static/icons/filter_icon.png" class="filter-icon"/>
					</view>
				</view>
			</view>
			<view class="mt-200" v-if="stockData.total === 0">
				<empty-data  :imgSrc="IMG_URL + '/status/no_list.png'"></empty-data>
			</view>
			<view v-if="stockData.total > 0">
				<view class="section" v-for="(item, index) in stockData.list" :key="index">
					<view class="display-flex">
						<view class="flex title">
							<view class="display-flex justify-between font-26">
								<view class="left display-flex align-center">
									<text class="font-302D2D font-bold">{{ item.spzs }}</text>
									<text :class="['tags-right','普通' === item.spdm?'custom':'no-custom']">{{ item.spdm }}</text>
								</view>
								<view class="right font-28">
									<text class="font-302D2D">条码：{{item.sptm}}</text>
								</view>
							</view>
							<view class="display-flex font-24 mt-10">
								<view class="tags display-flex flex-wrap">
									<text class="tags-right" v-if="item.wpggA">{{ item.wpggA }}</text>
									<text class="tags-right" v-if="item.wpggD">{{ item.wpggD }}</text>
									<text class="tags-right" v-if="item.spcd">{{ item.spcd }}</text>
									<text class="tags-right" v-if="item.wpggE">{{ item.wpggE }}</text>
									<text class="tags-right" v-if="item.wpggB">{{ item.wpggB }}</text>
									<text class="tags-right" v-if="item.wpggC">{{ item.wpggC }}</text>
									<text class="tags-right" v-if="item.wpggF">{{ item.wpggF }}</text>
								</view>
							</view>
							<view class="display-flex font-24 mt-20">
								<view class="flex">
									<text class="font-999">批号：</text>
									<text class="font-302D2D">{{ item.spbh }}</text>
								</view>
								<view class="flex">
									<text class="font-999">柜号：</text>
									<text class="font-302D2D">{{ item.spgh }}</text>
								</view>
							</view>
							<view class="display-flex font-24 mt-20">
								<view class="flex">
									<text class="font-999">仓库：</text>
									<text class="font-302D2D">{{ item.spckmc }}</text>
								</view>
								<view class="flex">
									<text class="font-999">仓位：</text>
									<text class="font-302D2D">{{ item.ckcw }}</text>
								</view>
							</view>
							<view class="display-flex font-24 mt-20">
								<view class="flex">
									<text class="font-999">入仓日期：</text>
									<text class="font-302D2D">{{ item.ssrqid }}</text>
								</view>
								<view class="flex">
									<text class="font-999">在仓天数：</text>
									<text class="font-302D2D">{{ item.days }}天</text>
								</view>
							</view>
							<view class="display-flex font-24 mt-20">
								<view class="flex">
									<text class="font-999">库存件数：</text>
									<text class="font-302D2D">{{ item.spjs }}件</text>
								</view>
								<view class="flex">
									<text class="font-999"> 库存重量：</text>
									<text class="font-302D2D">{{ item.spsl }}吨</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
			
		<u-drawer class="search display-flex flex-direction justify-between" mode="right" width="584" :show="showPopup" @close="beforeClose">
			<template v-slot:top>
				<view class="search-content font-26 font-black">
				    <view class="mt-30">
				        <text>品名规格</text>
				        <input v-model="stockData.query.spzs" placeholder="支持模糊查询" class="search-item-input mt-20" />
				    </view>
				    <view class="mt-30">
				        <text >批号</text>
				        <input v-model="stockData.query.spbh" placeholder="支持模糊查询" class="search-item-input mt-20" />
				    </view>
					<view class="mt-30">
					    <text >柜号</text>
					    <input v-model="stockData.query.spgh" placeholder="支持模糊查询" class="search-item-input mt-20" />
					</view>
					<view class="mt-30">
					    <text>仓库</text>
					<!--    <view class="mt-20 search-item" @click="selectWarehouse">
					        <text v-if="stockData.query.spckmc">{{ stockData.query.spckmc1 }}</text>
					        <text class="font-666666" v-else>请选择仓库</text>
					    </view> -->
						<select-btn-group :list="warehouse15Data.list" @click="selectOne($event)"></select-btn-group>
					</view>
				</view>
			</template>
			<template v-slot:bottom>
				<view class="display-flex search-footer justify-between">
				    <view class="plain-btn" @click="reset">重置</view>
				    <view class="btn" @click="handleSearch">确定</view>
				</view>
			</template>
		</u-drawer>
		<!-- <u-popup :show="searchData.showSpckmc" title="请选择仓库"  @close="changeSpckmcShow">
		   <template v-slot:content>
			 <view class="select-warehouse15 display-flex flex-wrap">
				 <view v-for="(item, index) in warehouse15Data.list" :key="item.spckid" :class="item.active?'active item':'item'" @click="warehouseSelected(index)">
					 <text>{{ item.spckmc }}</text>
				 </view>
			 </view>  
		   </template>
		 </u-popup> -->
		<view class="load-more" v-if="stockData.total > 0">
			<u-load-more ref="loadMoreRef"></u-load-more>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { reactive, ref } from 'vue'
	import { stock } from '@/api'
	import { useAuthStore } from '@/store/auth'
	import { onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
	import emptyData from '@/pages/components/empty-data'
	import { IMG_URL } from '@/utils/constant'
	
	const loadMoreRef = ref()
	const authStore = useAuthStore()
	const user = authStore.getUser()
	const status = ref(0)
	const searchData: any = reactive({
	    showSpckmc:false
	})
	const warehouse15Data:any = reactive({
	    query:{},
	    list:[]
	})
	const stockData:any = reactive({
		query: {
			ally: "",
			ckcw1: "",
			day: "",
			dayi: "",
			downloadType: "json",
			gaoling: "",
			jqcz: "",
			khmc: user.shopName,
			spbh: "",
			spbz: "",
			spcd: "",
			spckids:[],
			spckmc: "",
			spckmc1: "",
			spdms: [],
			spgh: "",
			spmc: "",
			sptm: "",
			spzs: "",
			ssrqid: "",
			wbdh: "",
			noLoading:false,
		},
		params: {
			pageNum:1,
			pageSize:10,
			reasonable:false
		},
		list:[],
		sumList:{
			spjs:'',
			spsl:''
		},
		total:'',
	})
	const showPopup = ref(false)
	
	onLoad(() => {
		stockList()
		 warehouse15()
	})
	
	
	const stockList = (cb?:Function) => {
		stock.getCargoList(stockData.query, stockData.params).then((res:any) => {
			cb && cb()
			stockData.sumList = {
				spjs: res.sumList && res.sumList.spjs?res.sumList.spjs:0,
				spsl: res.sumList && res.sumList.spsl?res.sumList.spsl:0
			}
			stockData.total = res.total
			res.rows.map((item:any) => item.checked = false)
			stockData.list = [...stockData.list,...res.rows]
		})
	}
	
	
	const warehouse15 = () => {
	    stock.getWarehouse15({}).then((res:any) => {
			warehouse15Data.list = res.data.map((i:any) => {return {name:i.spckmc, id:i.spckid, active:false}})
	    })
	}
	
	// const clickTab  = (index:number) => {
	// 	refresh()
	// }
	
	// const warehouseSelected = (index:number) => {
	//     const data: any = warehouse15Data.list
	//     for(let i in data) {
	//         data[i].active = false
	//     }
	//     data[index].active = true
	// 	stockData.query.spckmc = data[index].spckid
	// 	stockData.query.spckmc1 = data[index].spckmc
	//     changeSpckmcShow()
	// }
	
	const selectOne = (data:any) => {
		warehouse15Data.list[data.index].active = !warehouse15Data.list[data.index].active
	}
	
	// const selectWarehouse =() => {
	//     changeSpckmcShow()
	// }
	
	// const changeSpckmcShow = () =>{
	//     searchData.showSpckmc = !searchData.showSpckmc
	// }
	
	const handleSearch = () => {
	    stockData.params.pageNum = 1
	    stockData.list = []
	    stockData.total = ''
		status.value = 0
		stockData.query.spckids = []
		warehouse15Data.list.map((item:any) => {
			if(item.active) {
				stockData.query.spckids.push(item.id)
			}
		})
	    stockList()
	    changePopupShow()
	}
	
	onReachBottom(() => {	
		if(stockData.params.pageNum * stockData.params.pageSize > stockData.total) return loadMoreRef.value.changeStatusNoMore()
		stockData.params.pageNum++
		loadMoreRef.value.changeStatusLoading()
		setTimeout(() => {
			stockData.query.noLoading = true
			stockList(() => {
				loadMoreRef.value.changeStatusNoLoading()
				if(stockData.params.pageNum * stockData.params.pageSize > stockData.total) return loadMoreRef.value.changeStatusNoMore()
			})
		}, 300)
	})
	
	onPullDownRefresh(() => {
		if(stockData.total === 0) uni.stopPullDownRefresh()
		refresh()
		setTimeout(function () {
			uni.stopPullDownRefresh()
		}, 1000)
	})
	
	const refresh = () => {
		stockData.query.noLoading = false
		if(loadMoreRef.value) loadMoreRef.value.changeStatusNoLoading()
		stockData.params.pageNum = 1
		stockData.list = []
		stockList()
	}
	
	const changePopupShow = () => {
	    showPopup.value = !showPopup.value
	}
	
	const beforeClose = () => {
	    changePopupShow()
	    stockList()
	}
	
	const reset = () => {
	    stockData.query = {
	       ally: "",
	       ckcw1: "",
	       day: "",
	       dayi: "",
	       downloadType: "json",
	       gaoling: "",
	       jqcz: "",
	       khmc: user.shopName,
	       spbh: "",
	       spbz: "",
	       spcd: "",
		   spckids:[],
	       spckmc: "",
		   spckmc1: "",
	       spdms: [],
	       spgh: "",
	       spmc: "",
	       sptm: "",
	       spzs: "",
	       ssrqid: "",
	       wbdh: "",
	    }
	    const data: any = warehouse15Data.list
	    for(let i in data) {
	        data[i].active = false
	    }
	}
	
</script>

<style lang="scss" scoped>
	.search {
	    .search-content {
	        padding: 69rpx 0rpx 66rpx 30rpx; 
	        .search-item {
	            text-align:center;
	            width: 451rpx;
	            height: 60rpx;
	            line-height: 60rpx;
	            border-radius: 30rpx;
	            background: #F3F4F7;
	            display:block;
	        }
	        .search-item-input {
	            text-align:center;
	            width: 451rpx;
	            height: 60rpx;
	            border-radius: 30rpx;
	            background: #F3F4F7;
	            display:block;
	            border:none;
	        }
	    }
	    .search-footer {
	        padding:0 50rpx 80rpx; 
			.plain-btn {
				width:212rpx;
				height: 90rpx;
				text-align: center;
				line-height: 90rpx;
				background-color: #f1f1f1;
				border-radius: 16rpx;
			}
			.btn {
			    width:212rpx;
			    height: 90rpx;
				background-color: #255FB6;
				color:#fff;
				text-align: center;
				line-height: 90rpx;
				border-radius: 16rpx;
			}    
	    } 
	} 
	// .select-warehouse15 {
	//     padding:15rpx 20rpx 30rpx;
	//     height: 550rpx;
	//     font-size: 26rpx;
	//     .item {
	//         min-width:150rpx;
	//         padding:0 10rpx;
	//         display:inline-block;
	//         height:60rpx;
	//         line-height: 60rpx;
	//         color:#999;
	//         text-align:center;
	//         border-radius:30rpx;
	//         border:1rpx solid #999;
	//         margin:15rpx;
	//         &.active {
	//             color:#fff;
	//             border:1rpx solid #255FB6;
	//             background:#255FB6;
	//         }
	//     }
	// }
	.zh-storage-stock {
		.tabs {
			padding:0 200rpx;
		}
		.content {
			.sum-list {
				padding: 30rpx;
				font-size: $uni-font-size-26;
			}
			.filter {
				padding:30rpx;
				text {
					white-space: nowrap;
				}
				.filter-icon {
					width: 24rpx;
					height: 24rpx;
					margin-left:5rpx;
				}
			}
			.section {
				background-color:$uni-bg-card-color;
				padding:30rpx;
				margin-bottom: 20rpx;
				.title {
					.tags {
						//margin-top: 20rpx;
						.tags-right {
							text-align:center;
							color:#666666;
							background-color:#F5F6F8;
							padding:0 17rpx;
							height:34rpx;
							line-height: 34rpx;
							font-size: 22rpx;
							margin-right:10rpx;
							border-radius: 6px;
							margin-top:20rpx;
						}
						
					}
					.left {
						.tags-right {
							width:53rpx;
							height: 22rpx;
							box-sizing:border-box;
							text-align:center;
							font-size:18rpx;
							line-height:20rpx;
							margin-left: 10rpx;
						}
						.custom {
							border:1rpx solid #1769FF;
							background-color: #EFF6FF;
							color:#1769FF;
						}
						.no-custom {
							border:1rpx solid #FF661B;
							background-color:#FFF7EF;
							color:#FF661B;
						}
					}
				}
				.footer {
					border-top: 1rpx solid $uni-border-color;
					padding:10rpx 0;
					margin-top: 30rpx;
					.up-btn {
						width:121rpx;
						height: 52rpx;
						border:1rpx solid #1769FF;
						box-sizing:border-box;
						text-align:center;
						color:#1769FF;
						font-size:24rpx;
						line-height:50rpx;
						margin-left: 10rpx;
						border-radius:6rpx;
					}
					.down-btn {
						width:121rpx;
						height: 52rpx;
						border:1rpx solid #B5B5B5;
						box-sizing:border-box;
						text-align:center;
						color:#302D2D;
						font-size:24rpx;
						line-height:50rpx;
						margin-left: 10rpx;
						border-radius:6rpx;
					}
				}
				
			}
		}
	}
</style>
